<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Task Manager</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://unpkg.com/htmx.org@1.9.6/dist/htmx.min.js"></script>
    <script src="https://unpkg.com/htmx.org/dist/ext/json-enc.js"></script>


    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        danger: '#EF4444',
                        dark: '#1F2937',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .task-item {
                @apply flex items-center justify-between p-4 mb-3 rounded-lg transition-all duration-300;
            }
            .task-item-complete {
                @apply bg-gray-100 text-gray-500 line-through;
            }
            .btn {
                @apply px-4 py-2 rounded-lg font-medium transition-all duration-200;
            }
            .btn-primary {
                @apply bg-primary text-white hover:bg-primary/90;
            }
            .btn-danger {
                @apply bg-danger text-white hover:bg-danger/90;
            }
            .btn-secondary {
                @apply bg-secondary text-white hover:bg-secondary/90;
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-sans text-dark">
<div class="max-w-3xl mx-auto px-4 py-8">
    <header class="text-center mb-8">
        <h1 class="text-[clamp(2rem,5vw,3rem)] font-bold text-primary mb-2">Task Manager</h1>
        <p class="text-gray-600">Simple task management with Spring Boot and HTMX</p>
    </header>

    <!-- 任务列表 -->
    <div class="bg-white rounded-xl shadow-lg p-6 mb-6">
        <div class="flex flex-col space-y-4">
            <!-- 任务表单 -->
            <form
                    hx-post="/api/tasks"
                    hx-target="#task-list"
                    hx-ext="json-enc"
                    hx-swap="afterbegin"
                    class="flex space-x-3"
            >
                <input
                        type="text"
                        name="title"
                        placeholder="Add a new task..."
                        required
                        class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50"
                >
                <button type="submit" class="btn btn-primary">
                    <i class="fa fa-plus mr-2"></i> Add
                </button>
            </form>

            <!-- 任务列表容器 -->
            <div id="task-list" class="space-y-3">
                <!-- 任务项将通过HTMX动态加载 -->
                <div class="text-center text-gray-500 py-8" hx-get="/api/tasks" hx-trigger="load">
                    <i class="fa fa-spinner fa-spin text-primary text-2xl mb-2"></i>
                    <p>Loading tasks...</p>
                </div>
            </div>
        </div>
    </div>

    <footer class="text-center text-gray-500 text-sm">
        <p>Spring Boot + HTMX Task Manager</p>
    </footer>
</div>

<!-- 任务项模板 (不会显示，仅用于JS克隆) -->
<template id="task-item-template">
    <div class="task-item" hx-swap-oob="true">
        <div class="flex items-center space-x-3">
            <button
                    class="task-toggle-btn w-6 h-6 rounded-full border-2 flex items-center justify-center cursor-pointer transition-all"
                    hx-put="/api/tasks/{id}/toggle"
                    hx-target="closest .task-item"
                    hx-swap="outerHTML"
            >
                <i class="fa fa-check text-white text-xs"></i>
            </button>
            <span class="task-title">{title}</span>
        </div>
        <button
                class="delete-task-btn text-gray-400 hover:text-danger transition-colors"
                hx-delete="/api/tasks/{id}"
                hx-target="closest .task-item"
                hx-swap="delete"
                hx-confirm="Are you sure you want to delete this task?"
        >
            <i class="fa fa-trash-o text-lg"></i>
        </button>
    </div>
</template>

<script>
    // 处理任务项的渲染
    document.body.addEventListener('htmx:afterRequest', function(evt) {
        if (evt.detail.target.id === 'task-list') {
            const tasks = JSON.parse(evt.detail.xhr.responseText);
            const taskList = document.getElementById('task-list');
            //taskList.innerHTML = '';

            if (tasks.length === 0) {
                taskList.innerHTML = `
                    <div class="text-center text-gray-500 py-8">
                        <i class="fa fa-check-circle text-secondary text-3xl mb-2"></i>
                        <p>No tasks yet. Add your first task!</p>
                    </div>
                `;
                return;
            }

            const template = document.getElementById('task-item-template');
            tasks.forEach(task => {
                const taskItem = document.importNode(template.content, true);

                // 替换模板变量
                const html = taskItem.firstElementChild.outerHTML
                    .replace(/{id}/g, task.id)
                    .replace(/{title}/g, task.title);

                const parser = new DOMParser();
                const doc = parser.parseFromString(html, 'text/html');
                const newTaskItem = doc.body.firstElementChild;

                // 设置任务完成状态
                if (task.completed) {
                    newTaskItem.classList.add('task-item-complete');
                    newTaskItem.querySelector('.task-toggle-btn').classList.add('bg-secondary', 'border-secondary');
                } else {
                    newTaskItem.querySelector('.task-toggle-btn').classList.add('border-gray-300', 'hover:border-secondary', 'hover:bg-secondary/10');
                }

                taskList.appendChild(newTaskItem);
            });
        }
    });

    // 表单提交后清空输入框
    document.body.addEventListener('htmx:afterRequest', function(evt) {
        if (evt.detail.target.tagName === 'FORM') {
            evt.detail.target.reset();
        }
    });
</script>
</body>
</html>